<template>
  <div class="common-pwd-reset-input">
    <template v-if="isEdit">
      <div v-show="canEditPass" style="display: flex;">
        <common-input
          :verify="false"
          :type="'password'"
          v-model="password"
          :maxlength="maxlength ? maxlength : 64"
          @input="$emit('input', $event)"
          placeholder="请输入"/>
        <el-button style="margin-left: 8px;" type="primary" plain @click="editPassword(false)">取消</el-button>
      </div>
      <el-button v-show="!canEditPass" type="primary" plain @click="editPassword(true)">重置</el-button>
    </template>
    <template v-else>
      <common-input
        :verify="false"
        :type="type"
        v-model="password"
        placeholder="请输入"
        :maxlength="length"
        @input="$emit('input', $event)"/>
    </template>
  </div>
</template>

<script>
  export default {
    name: "index",
    props: {
      isEdit: {
        type: Boolean,
        default: () => false
      },
      type: {
        type: String,
        default: 'password'
      },//输入框类型
      value: {
        type: String,
        default: () => ''
      },
      maxlength: {
        type: Number,
      }
    },
    watch:{
      value:{
        handler(val, newVal) {
          if(val) this.password = val
        }
      }
    },
    computed: {
      length: function() {
        return this.type === 'password' ? (this.maxlength ? this.maxlength : 64) : 256
      }
    },
    data() {
      return {
        canEditPass: false,
        password: '',
      }
    },
    methods: {
      editPassword(val) {
        this.canEditPass = val;
        if (!this.canEditPass) {
          this.password = '';
        }
        this.$emit('input', this.password)
        this.$emit('change', val)
      },
      input(val) {
        this.$emit('input', val)
      },
    },
    mounted() {
      if(this.value) this.password = this.value
    }
  }
</script>

<style scoped>

</style>
